<template>
  <div>
    <!-- 用户信息 -->
    <Row type="flex" justify="end" align="middle" class="nl-user">
      <Col span="1">
        <Row type="flex" justify="end">
          <Col span="15">
            <Avatar icon="ios-person" />
          </Col>
        </Row>
      </Col>
      <Col span="2">
        <Row>
          <Col span="19" style="color:white;">小美呀，欢迎您！</Col>
          <Col span="1">
            <!-- 下拉菜单组件，trigger是设置触发方式 -->
            <Dropdown trigger="click">
              <a href="javascript:void(0)" style="color:white;">
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>个人中心</DropdownItem>
                <DropdownItem>退出</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Col>
        </Row>
      </Col>
      <Col span="1"></Col>
    </Row>

    <Row type="flex" justify="center" style="margin-top:10px;">
      <Col>
        <h2>智慧功能</h2>
      </Col>
    </Row>
    <Row type="flex" justify="center">
      <Col span="5">
        <Divider>Smart Function</Divider>
      </Col>
    </Row>
    <!-- 功能卡片 -->
    <Row type="flex" justify="center">
      <Col span="2">
        <Row>
          <Col span="20">
            <Affix :offset-top="0">
              <div class="card_list">
                <List header="应用功能" border>
                  <div style="width:100%" v-for="(cardindex,i) in vueRouters" :key="i">
                    <!-- @click="changeLoc(vueRouters[i].name)" -->
                    <ListItem v-if="cardindex.meta.display!='false'">
                      <a
                        :href="'#'+cardindex.name"
                        @click.prevent="toto(cardindex.name)"
                      >{{cardindex.meta.title}}</a>
                    </ListItem>
                  </div>
                  <!-- <div @click="goAssignBlock('正面宣传',50)">
                    <ListItem>正面宣传</ListItem>
                  </div>-->
                </List>
              </div>
            </Affix>
          </Col>
        </Row>
      </Col>
      <Col span="16">
        <div style="width:100%" v-for="(item,i) in vueRouters" :key="i">
          <Row v-if="item.meta.display!='false'">
            <Col>
              <h3 :id="item.name">{{item.meta.title}}</h3>
            </Col>
          </Row>
          <!-- <Row v-if="item.meta.display!='false'">
            <Col span="4" v-for="(itemChild, j) in item.children" :key="j">
              <appCard
                :title="itemChild.meta.title"
                :iconName="itemChild.meta.icon"
                :acIndex="j"
                :acPath="itemChild.path"
              ></appCard>
            </Col>
          </Row>-->
          <div style="width:100%" v-if="item.meta.display!='false'">
            <Row>
              <div v-for="(itemChild, j) in item.children" :key="j">
                <div
                  style="width:20%;padding:10px; float:left;"
                  v-if="itemChild.meta.display!='false'"
                >
                  <appCard
                    :title="itemChild.meta.title"
                    :iconName="itemChild.meta.icon"
                    :acIndex="j"
                    :acPath="itemChild.path"
                  ></appCard>
                </div>
              </div>
            </Row>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import appCard from "./components/app-card/app-card";
export default {
  components: {
    appCard
  },
  data() {
    return {
      vueRouters: []
    };
  },
  created() {
    this.vueRouters = this.$router.options.routes;
    console.log(this.vueRouters, "123");
  },

  mounted() {},
  methods: {
    toto(url) {
      let url2 = "#" + url;
      let link = document.createElement("a");
      link.href = url2;
      document.body.appendChild(link);
      link.click();
      this.$Spin.show();
      setTimeout(() => {
        this.$Spin.hide();
      }, 300);
    },
    changeLoc(key) {
      console.log(key);
      // 获取点击的按钮对应页面的id
      var PageId = document.getElementById(key);
      // 使用平滑属性，滑动到上方获取的距离
      // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
      // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
      window.scrollTo({
        top: PageId.offsetTop,
        behavior: "smooth"
      });
    }
  }
};
</script>

<style scoped>
/* 头部样式 */
.nl-user {
  background: rgb(25, 25, 82);
  box-shadow: 0 0 10px #dcdee2;
  height: 50px;
}
/* 分隔符内文字模块样式 */
.ivu-divider-horizontal.ivu-divider-with-text-center,
.ivu-divider-horizontal.ivu-divider-with-text-left,
.ivu-divider-horizontal.ivu-divider-with-text-right {
  margin-top: 2px;
}
/* .card_list{
  position: fixed;
  top: 10px;
} */
</style>
